import { styled } from '@umijs/max'

type TableContainerProps = {
  Toolbar: any
  SearchContainer: any
} & any

const TableContainer: TableContainerProps = styled.div`
  width: 100%;
  min-height: 100%;
  padding: 16px;
  background-color: #ffffff;
  border-radius: var(--ant-border-radius);
  margin-bottom: 16px;

  .ant-table-pagination-left {
    & > li {
      display: none !important;

      &:first-child {
        display: flex !important;
      }
    }

    & > .ant-pagination-total-text {
      & > div {
        &:last-child {
          display: none;
        }
      }
    }
  }

  .ant-pagination-total-text {
    flex: 1 !important;
    display: flex !important;
    justify-content: space-between;
  }
`

TableContainer.Toolbar = styled.div`
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
`

TableContainer.SearchContainer = styled.div`
  width: 100%;
  padding: 16px;
  background: #F7F7F7;
  border-radius: var(--ant-border-radius);
  margin-bottom: 16px;

  .ant-form-item {
    margin: 0;

    .ant-form-item-row {
      background: #FFFFFF;
      border-radius: var(--ant-border-radius);
      border: 1px solid #D9D9D9;
      padding-left: 8px;
    }
  }
`

export default TableContainer
